<template>
    <div style="margin-top: 23px">
        <div class="father">
            <p style="margin-left: 20px">wwd8979的博客</p>
        </div>
        <div style="text-align: center;margin-top: -30px">
            <el-avatar :size="70" src="https://cube.elemecdn.com/0/88/03b0d39583f48206768a7534e55bcpng.png"></el-avatar>
            <div>{{userInfo.username}}    &nbsp;码龄：5年</div>
        </div>

        <div style="text-align: center;margin-top: 10px">

          <ul class="uls">
              <li class="ls" >
                  <div>282000</div>
                  <div>被访问量</div>
              </li>
              <li class="ls">
                  <div>18</div>
                  <div>原创文章</div>
              </li>
              <li class="ls">
                  <div>256321</div>
                  <div>作者排名</div>
              </li>
              <li class="ls">
                  <div>2</div>
                  <div>粉丝数量</div>
              </li>
          </ul>
        </div>

        <div style="margin-top: 20px" >
            <table width="100%">
                <tr>
                    <td valign="top"  style="width: 30%;">
                        <el-card class="box-card">
                           <div><p class="el-icon-refrigerator"></p> 毕业院校 山科大</div>
                            <div><p class="el-icon-takeaway-box"></p>目前就职 思途</div>
                           <div><p class="el-icon-monitor"></p>于 2016-03-01 加入</div>
                        </el-card>
                        <el-card class="box-card" style="margin-top: 10px">
                            <div><p class="el-icon-refrigerator"></p> 毕业院校 山科大</div>
                            <div><p class="el-icon-takeaway-box"></p>目前就职 思途</div>
                            <div><p class="el-icon-monitor"></p>于 2016-03-01 加入</div>
                        </el-card>
                    </td>
                    <td valign="top" style="width: 70%; overflow:hidden;margin-left: 10px;margin-right: 20px" >
                        <div >

                            <el-tabs v-model="activeName"  @tab-click="handleClick">
                                <el-tab-pane label="最近" name="DepManage">
                                    <table style="list-style: none;margin-top: 10px;margin-left: 10px;width: 100%;" v-for="item in blogList">

                                        <el-card class="box-card">
                                            <tr>
                                                <div style="float: left;font-size: 20px;font-weight: bold"><a :href="'/#/blog_detail?id='+item.id" class="a">{{item.title}}</a></div>
                                            </tr>
                                            <tr>
                                                <td>{{item.name}}</td>
                                            </tr>

                                            <tr>
                                                <ul class="uls">
                                                    <li class="ls" >
                                                        <div><p style="display: inline-block;color: #CA0C16;background-color: #f0f9eb">原创</p></div>
                                                    </li>
                                                    <li class="ls">
                                                        <div><p class="el-icon-reading"></p>682阅读</div>
                                                    </li>
                                                    <li class="ls">
                                                        <div><p class="el-icon-s-comment"></p>0评论</div>
                                                    </li>
                                                    <li class="ls">
                                                        <div><p class="el-icon-s-comment"></p>2点赞</div>
                                                    </li>
                                                </ul>
                                            </tr>
                                        </el-card>


                                    </table>

                                </el-tab-pane>
                                <el-tab-pane label="文章" name="PosManage">
                                    <table style="list-style: none;margin-top: 10px;margin-left: 10px;width: 100%;" v-for="item in blogList">

                                        <el-card class="box-card">
                                            <tr>
                                                <div style="float: left;font-size: 20px;font-weight: bold"><a :href="'/#/blog_detail?id='+item.id" class="a">{{item.title}}</a></div>
                                            </tr>
                                            <tr>
                                                <td>{{item.name}}</td>
                                            </tr>

                                            <tr>
                                                <ul class="uls">
                                                    <li class="ls" >
                                                        <div><p style="display: inline-block;color: #CA0C16;background-color: #f0f9eb">原创</p></div>
                                                    </li>
                                                    <li class="ls">
                                                        <div><p class="el-icon-reading"></p>682阅读</div>
                                                    </li>
                                                    <li class="ls">
                                                        <div><p class="el-icon-s-comment"></p>0评论</div>
                                                    </li>
                                                    <li class="ls">
                                                        <div><p class="el-icon-s-comment"></p>2点赞</div>
                                                    </li>
                                                </ul>
                                            </tr>
                                        </el-card>


                                    </table>

                                </el-tab-pane>
                                <el-tab-pane label="收藏" name="third">收藏</el-tab-pane>
                                <el-tab-pane label="帖子" name="fourth">帖子</el-tab-pane>
                            </el-tabs>

                        </div>
                    </td>
                </tr>
            </table>
        </div>



    </div>
</template>

<script>
    import {getReq} from "../../../utils/api";

    export default {
        mounted(){
            this.id =this.$route.query.id
            this._getUserInfo()
            this._page()
        },
        name: "UserCenter",
        data(){
            return{
                id:undefined,
                userInfo:{},
                activeName:'PosManage',
                blogList:[]
            }
        },
        methods:{
            _page(){
                getReq('/api/blog/list',{}).then(res=>{
                    console.log('---res---',res)
                    console.log('---res.data---',res.data)
                    this.blogList=res.data.data;
                })
            },
             _getUserInfo() {
                 let userInfo=  sessionStorage.getItem('user')
                 if (undefined===this.id||null===this.id||''===this.id){
                     this.id=JSON.parse(userInfo).id
                 }


                 let userCenter = sessionStorage.getItem('userCenter')
                 if (undefined===userCenter||null===userCenter){
                     getReq('/api/sys_user/vo/'+this.id,{}).then(res=>{
                         this.userInfo = res.data.data
                         sessionStorage.setItem('userCenter',JSON.stringify(res.data.data))
                     })
                 }else {
                     this.userInfo = JSON.parse(userCenter)
                 }


             }
        }
    }
</script>

<style scoped>

    .father{
        height: 70px;
        background-color: darkslategray;
        vertical-align:middle;
        /*flex 布局*/
        display: flex;
        /*实现垂直居中*/
        align-items: center;
        text-align: left;

        height:70px;
        color:#fff;
    }
    .a{
        text-decoration:none;
        color: black;
    }
    .info{

        text-align: center;
        margin-right: 25px;
        font-size: 24px;
        justify-items: center;
        font-family: DINCond-Black;
        font-weight: bold;
    }
    .infoLabel{
        margin-right: 29px;
    }

    .uls{
        padding: 0;
        margin: 0;
        list-style: none;
    }
    .ls{
        display:inline-block;
        margin-right: 20px;
    }
    .lsmain{
        display:inline-block;
        margin-right: 20px;
    }
</style>